<template>
	<view class="container">
		
		<!--tabbar-->
		<view class="tui-tabbar">
			<block v-for="(item,index) in tabbar" :key="index">
				<view class="tui-tabbar-item" :class="[tabCur==index?'tui-item-active':'']" :data-index="index" @tap="tabbarSwitch">
					<view :class="[index==0?'tui-ptop-4':'']">
						<tui-icon :name="tabCur==index?item.icon+'-fill':item.icon" :color="tabCur==index?'#E41F19':'#666'" :size="item.size"></tui-icon>
					</view>
					<view class="tui-scale">{{item.text}}</view>
				</view>
			</block>
		</view>
		<!--tabbar-->
		
		<view class="product-list">
			<!--商品列表-->
			<view v-for="(item,index) in goodsList" :key="index" class="pro-item" @tap="goGoodsView(item.goods_id)" >
				<image :src="item.img_logo" class="pro-img" mode="widthFix" />
				<view class="pro-content">
					<view class="pro-tit">{{item.goods_name}}</view>
					<view>
						<view class="pro-price">
							<text class="sale-price">￥{{item.money}}</text>
						</view>
						<view class="pro-pay">{{item.add_time}}</view>
					</view>
				</view>
			</view>
			<!--商品列表-->
		</view>
		<!--加载loadding-->
		<tui-loadmore :visible="loadding" :index="3" type="primary"></tui-loadmore>
		<tui-nomore :visible="!pullUpOn"></tui-nomore>
		<!--加载loadding-->
	</view>
</template>

<script>
	import footerMenu from "@/components/footer-menu.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiLoadmore from "@/components/thorui/tui-loadmore/tui-loadmore"
	import tuiNomore from "@/components/thorui/tui-nomore/tui-nomore"
	export default {
		components: {
			tuiLoadmore,
			tuiNomore,
			tuiIcon
		},
		data() {
			return {
				goodsList: [],
				pageIndex:1,
				pageCount: 0,
				pageTotal: 0,

				loadding: false,
				pullUpOn: true,
				
				//底部导航栏tabbar
				tabCur: 1,
				tabbar: [{icon: "home", text: "首页", size: 21}, 
				//	{icon: "cart", text: "购物车", size: 22}, 
					{icon: "people", text: "我的", size: 24}],
			}
		},
		methods: {
			
			
			//底部导航栏tabbar
			tabbarSwitch: function(e) {
				let index = e.currentTarget.dataset.index;
				this.tabCur = index;
				if (index == 0) {
					uni.switchTab({ url: '/pages/site/index' })
				} else if (index == 1) {
					uni.switchTab({ url: '/pages/my-cart/index' })
				} else {
					uni.switchTab({ url: '/pages/my/index' })
				}
			},
			
			//商品的详情页面
			goGoodsView: function(e) {
				uni.navigateTo({
					url: '/pages/goods/view?id=' + e
				})
			},
			
			getGoodsList: function(type) {
				if(type != 'append') this.pageIndex = 1;
				uni.request({
					url: this.$apiUrl + '/api/my-goods/like-list',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
            'shopId': uni.getStorageSync('shopId')
					},
					data: {
						page_num: this.pageIndex,
					},
					success: (res) => {
						let resData = res.data['data'];
						if(type == 'append') {		//底部分页加载更多
							this.goodsList = this.goodsList.concat(resData['list']);
						}else{
							this.goodsList = resData['list'];
						}
						this.pageCount = resData['pager']['page_total'];
						this.pageTotal = resData['pager']['count'];
					}
				});
			},
		
		},
		
		
		//页面加载的时候
		onLoad: function(options) {
			this.getGoodsList();
		},
		
		
		//页面相关事件处理函数--监听用户下拉动作
		onPullDownRefresh: function() {
			//延时为了看效果
		},

		//页面上拉触底事件的处理函数
		onReachBottom: function() {			
			if (!this.pullUpOn) return;
			this.loadding = true;
			if (this.pageIndex == this.pageCount) {
				this.loadding = false;
				this.pullUpOn = false;
			} else {
				this.pageIndex = this.pageIndex + 1;
				this.getGoodsList('append');
				this.loadding = true;
			//	this.pullUpOn = false;
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	
	/*tabbar*/
	.tui-tabbar {width: 100%; position: fixed; display: flex;align-items: center;justify-content: space-between;z-index: 99999;background: #fff; height: 100rpx;left: 0;bottom: 0;padding-bottom: env(safe-area-inset-bottom);}
	.tui-safearea-bottom {width: 100%;height: env(safe-area-inset-bottom);}
	.tui-tabbar::before {content: ''; width: 100%; border-top: 1rpx solid #d9d9d9;position: absolute;top: 0;left: 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}
	.tui-tabbar-item {flex: 1;width: 25%;display: flex;align-items: center;flex-direction: column;justify-content: space-between;font-size: 24rpx;color: #666;height: 80rpx;}
	.tui-ptop-4 {padding-top: 4rpx;}
	.tui-scale {font-weight: bold;transform: scale(0.8);transform-origin: center 100%;line-height: 30rpx;}
	.tui-item-active {color: #e41f19 !important;}
	/*tabbar*/

	.product-list {
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 30upx 30upx 0 30upx;
		background: #fff;
	}

	.pro-item {
		background: #fff;
		box-sizing: border-box;
		width: 49%;
		position: relative;
		margin-bottom: 2%;
	}

	.pro-item::after {
		content: '';
		position: absolute;
		height: 200%;
		width: 200%;
		border: 1upx solid #eaeef1;
		transform-origin: 0 0;
		-webkit-transform-origin: 0 0;
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
		left: 0;
		top: 0;
	}

	.pro-img {
		width: 100%;
		display: block;
	}

	.pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20upx;
		height: 230upx;
	}

	.pro-tit {
		/* font-size:  */
		color: #2e2e2e;
		font-size: 26upx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.pro-price {
		padding-top: 18upx;
	}

	.sale-price {
		font-size: 34upx;
		font-weight: 500;
		color: #ea1500;
	}

	.factory-price {
		font-size: 24upx;
		color: #a0a0a0;
		/* text-decoration: line-through; */
		padding-left: 12upx;
	}

	.pro-pay {
		padding-top: 10upx;
		font-size: 24upx;
		color: #656565;
	}
</style>